import {Tabs} from 'expo-router';
import React from 'react';
import {Platform, StyleSheet, View, Image} from 'react-native';

import {HapticTab} from '@/components/HapticTab';
import {IconSymbol} from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {BlurView} from 'expo-blur';
import LinearGradientText from "@/components/LinearGradientText";

export default function TabLayout() {
    const colorScheme = useColorScheme();
    const TabView = ({tabName,width,height,isFocused}) => (
        // 注：tabs如果用.svg格式的话，app有些不展示
        <View>
            {['index','aiFilmProduction'].includes(tabName) && <Image style={styles.ai_icon} source={require('@/assets/images/tabBar/aijb_icon.png')}></Image>}
            {tabName ==='home' && isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/home_active.png')}></Image>}
            {tabName ==='home' && !isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/home.png')}></Image>}
            {tabName ==='index' && isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/nrcz_active.png')}></Image>}
            {tabName ==='index' && !isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/nrcz.png')}></Image>}
            {tabName ==='aiFilmProduction' && isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/aicp_active.png')}></Image>}
            {tabName ==='aiFilmProduction' && !isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/aicp.png')}></Image>}
            {tabName ==='my' && isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/my_active.png')}></Image>}
            {tabName ==='my' && !isFocused && <Image style={{width,height}} source={require('@/assets/images/tabBar/my.png')}></Image>}
        </View>
    );

    return (
        <Tabs
            // tabBar={props => <TabBar{...props}/>}
            screenOptions={{
                tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
                tabBarInactiveTintColor: Colors[colorScheme ?? 'light'].tabTextDefault,
                headerShown: false,
                tabBarButton: HapticTab,
                tabBarBackground: TabBarBackground,
                tabBarStyle: Platform.select({
                    ios: {
                        // 在iOS上使用透明背景来显示模糊效果
                        position: 'absolute',
                    },
                    default: {
                        height: 65
                    },
                }),
                tabBarLabelStyle: {
                    fontSize: 12,
                    fontFamily: 'Georgia',
                    fontWeight: "bold",
                },
                // tabBarStyle: { position: 'absolute' },
                // tabBarBackground: () => (
                //     <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
                // ),
                animation: 'fade',
                // 不能使用渐变文字，这里只能是由一层标签且为Text标签
                // tabBarLabel: (optionData) => (
                //     <LinearGradientText optionData={optionData} len={5}></LinearGradientText>
                // ),
            }}>
            <Tabs.Screen
                name="home"
                options={{
                    title: '首页',
                    // tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
                    tabBarIcon: ({focused}) => <TabView tabName='home' width={24} height={24} isFocused={focused}/>,
                    // tabBarButton: (props) =>  <LinearGradientText optionData={{...props}} len={5} />
                }}
            />
            <Tabs.Screen
                name="index"
                options={{
                    title: '内容创作',
                    // tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
                    tabBarIcon: ({focused}) => <TabView tabName='index' width={24} height={24} isFocused={focused}/>,
                    // tabBarButton: (props) =>  <LinearGradientText optionData={{...props}} len={5} />
                }}
            />
            <Tabs.Screen
                name="aiFilmProduction"
                options={{
                    title: 'AI成片',
                    tabBarIcon: ({focused}) => <TabView tabName="aiFilmProduction" width={24} height={24} isFocused={focused}/>,
                }}
            />
            <Tabs.Screen
                name="my"
                options={{
                    title: '我的',
                    tabBarIcon: ({focused}) => <TabView tabName="my" width={24} height={24} isFocused={focused}/>,
                }}
            />
        </Tabs>
    );
}

const styles = StyleSheet.create({
    ai_icon: {
        width: 14,
        height: 8,
        position: "absolute",
        top: -3,
        right: -10
    }
});
